<template>
  <div class="quality-audit">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2>质量审核管理</h2>
    </div>

    <!-- 审核列表 -->
    <div class="audit-table">
      <!-- 筛选和操作区域 -->
      <div class="top-controls">
        <!-- 筛选标签页 -->
        <div class="filter-tabs">
          <el-tabs v-model="activeTab" @tab-change="handleTabChange()">
            <el-tab-pane label="全部" name="" />
            <el-tab-pane label="待审核列表" name="待处理" />
            <el-tab-pane label="已审核" name="已完成" />
            <el-tab-pane label="已打回" name="已打回" />
          </el-tabs>
          <el-select v-model="inspectType" placeholder="选择质检类型" clearable @change="loadTableData()" filterable>
            <el-option label="原材料" value="原材料"></el-option>
            <el-option label="半成品" value="半成品"></el-option>
            <el-option label="成品" value="成品"></el-option>
          </el-select>
        </div>

        <!-- 操作和搜索区域 -->
        <div class="action-section">
          <!-- 导出按钮 -->
          <el-button v-if="selectedInspections.length > 0" type="success" @click="handleExport"
            :loading="exportLoading">
            <el-icon>
              <Document />
            </el-icon>
            导出Excel ({{ selectedInspections.length }})
          </el-button>

          <div class="search-section">
            <el-input v-model="searchKeyword" placeholder="请输入供应商名称或批次号" style="width: 300px"
              @keyup.enter="loadTableData()">
              <template #append>
                <el-button @click="loadTableData()">
                  <el-icon>
                    <Search />
                  </el-icon>
                </el-button>
              </template>
            </el-input>
          </div>
        </div>
      </div>
      <el-table :data="auditList" style="width: 100%" @selection-change="handleSelectionChange"
        :row-class-name="tableRowClassName" border stripe highlight-current-row v-loading="tableLoading">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="inspectionId" label="质检编号" min-width="140">
          <template #default="{ row }">
            <span :class="{ 'urgent': row.isUrgent }" class="audit-number">
              <el-icon v-if="row.isUrgent">
                <WarningFilled />
              </el-icon>
              {{ row.inspectionId }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="inspectType" label="质检类型" min-width="120" />
        <el-table-column prop="inspectCategory" label="质检分类" min-width="120" />
        <el-table-column prop="inspectResult" label="质量结果" min-width="120">
          <template #default="{ row }">
            <el-tag :type="getResultTagType(row.inspectResult)" effect="dark" round>
              {{ row.inspectResult }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="质检人" min-width="100" />
        <el-table-column prop="updateTime" label="提交时间" min-width="160" />
        <el-table-column prop="inspectStatus" label="状态" min-width="100">
          <template #default="{ row }">
            <el-tag :type="getStatusTagType(row.inspectStatus)" effect="plain">
              {{ row.inspectStatus }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="200" fixed="right">
          <template #default="{ row }">
            <div class="operation-buttons">
              <el-button size="small" type="primary" @click="handleDetail(row)">
                <el-icon>
                  <View />
                </el-icon> 详情
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination">
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[5, 10, 20, 50]"
          :total="total" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
    </div>

    <!-- 统计卡片 -->
    <div class="stats-section">
      <div class="stats-card" :class="{ 'pulse-animation': animateCards }">
        <div class="stats-icon">
          <el-icon>
            <Calendar />
          </el-icon>
        </div>
        <div class="stats-content">
          <div class="stats-number">42</div>
          <div class="stats-label">今日待检数量</div>
          <div class="stats-trend up">
            <el-icon>
              <ArrowUp />
            </el-icon> 12.5% 较昨日
          </div>
        </div>
      </div>

      <div class="stats-card" :class="{ 'pulse-animation': animateCards }">
        <div class="stats-icon">
          <el-icon>
            <Check />
          </el-icon>
        </div>
        <div class="stats-content">
          <div class="stats-number">28</div>
          <div class="stats-label">已完成任务</div>
          <div class="stats-trend up">
            <el-icon>
              <ArrowUp />
            </el-icon> 8.3% 完成率
          </div>
        </div>
      </div>

      <div class="stats-card" :class="{ 'pulse-animation': animateCards }">
        <div class="stats-icon warning">
          <el-icon>
            <AlarmClock />
          </el-icon>
        </div>
        <div class="stats-content">
          <div class="stats-number">5</div>
          <div class="stats-label">紧急任务</div>
          <div class="stats-trend down">
            <el-icon>
              <ArrowDown />
            </el-icon> 2 待处理
          </div>
        </div>
      </div>

      <div class="stats-card" :class="{ 'pulse-animation': animateCards }">
        <div class="stats-icon danger">
          <el-icon>
            <WarningFilled />
          </el-icon>
        </div>
        <div class="stats-content">
          <div class="stats-number">28</div>
          <div class="stats-label">不合格项</div>
          <div class="stats-trend up">
            <el-icon>
              <ArrowUp />
            </el-icon> 3.2% 不合格率
          </div>
        </div>
      </div>
    </div>

    <!-- 质量报告审核弹窗 -->
    <el-dialog v-model="showAuditDialog" title="" width="70%" :close-on-click-modal="false" class="audit-dialog"
      :show-close="false">
      <!-- 自定义头部 -->
      <template #header>
        <div class="dialog-header">
          <div class="header-left">
            <div class="header-icon">
              <el-icon>
                <Document />
              </el-icon>
            </div>
            <div class="header-info">
              <h2>质量报告审核</h2>
              <p>编号：{{ currentAudit.inspectionId }}</p>
            </div>
          </div>
          <div class="header-right">
            <el-tag :type="getResultTagType(currentAudit.inspectResult)" size="large" effect="dark"
              class="status-badge">
              {{ currentAudit.inspectResult }}
            </el-tag>
            <el-button type="info" :icon="Close" circle @click="showAuditDialog = false" class="close-btn" />
          </div>
        </div>
      </template>

      <div class="audit-dialog-content">
        <!-- 基本信息卡片 -->
        <div class="info-card basic-info">
          <div class="card-header">
            <div class="card-title">
              <el-icon class="title-icon">
                <InfoFilled />
              </el-icon>
              <h3>基本信息</h3>
            </div>
            <div class="card-badge">
              <el-tag type="primary" size="small">基础数据</el-tag>
            </div>
          </div>
          <div class="card-content">
            <div class="info-grid">
              <div class="info-item">
                <div class="item-icon">
                  <el-icon>
                    <Key />
                  </el-icon>
                </div>
                <div class="item-content">
                  <label>批次编号</label>
                  <span class="value">{{ currentAudit.inspectionId }}</span>
                </div>
              </div>
              <div class="info-item">
                <div class="item-icon">
                  <el-icon>
                    <Box />
                  </el-icon>
                </div>
                <div class="item-content">
                  <label>质检类型</label>
                  <span class="value">{{ currentAudit.inspectType }}</span>
                </div>
              </div>
              <div class="info-item">
                <div class="item-icon">
                  <el-icon>
                    <User />
                  </el-icon>
                </div>
                <div class="item-content">
                  <label>检测员</label>
                  <span class="value">{{ currentAudit.name }}</span>
                </div>
              </div>
              <div class="info-item">
                <div class="item-icon">
                  <el-icon>
                    <CircleCheck />
                  </el-icon>
                </div>
                <div class="item-content">
                  <label>质量结果</label>
                  <el-tag :type="getResultTagType(currentAudit.inspectResult)" effect="dark" round class="result-tag">
                    {{ currentAudit.inspectResult }}
                  </el-tag>
                </div>
              </div>
              <!-- 只有成品才显示光通量 -->
              <div class="info-item" v-if="currentAudit.inspectType === '成品'">
                <div class="item-icon">
                  <el-icon>
                    <Sunny />
                  </el-icon>
                </div>
                <div class="item-content">
                  <label>光通量</label>
                  <span class="value highlight">{{ currentAudit.lightFlux }}</span>
                </div>
              </div>
              <!-- 只有成品才显示色温 -->
              <div class="info-item" v-if="currentAudit.inspectType === '成品'">
                <div class="item-icon">
                  <el-icon>
                    <Thermometer />
                  </el-icon>
                </div>
                <div class="item-content">
                  <label>色温</label>
                  <span class="value highlight">{{ currentAudit.colorTemp }}</span>
                </div>
              </div>
              <!-- 只有不合格才显示缺陷分类 -->
              <div class="info-item" v-if="currentAudit.inspectResult === '不合格'">
                <div class="item-icon">
                  <el-icon>
                    <WarningFilled />
                  </el-icon>
                </div>
                <div class="item-content">
                  <label>缺陷分类</label>
                  <span class="value defect-type">{{ currentAudit.defectType }}</span>
                </div>
              </div>
              <div class="info-item">
                <div class="item-icon">
                  <el-icon>
                    <Clock />
                  </el-icon>
                </div>
                <div class="item-content">
                  <label>检测时间</label>
                  <span class="value">{{ currentAudit.updateTime }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 检测报告卡片 -->
        <div class="info-card test-report">
          <div class="card-header">
            <div class="card-title">
              <el-icon class="title-icon">
                <DataAnalysis />
              </el-icon>
              <h3>监测数据</h3>
            </div>
            <div class="card-badge">
              <el-tag type="success" size="small">实时数据</el-tag>
            </div>
          </div>
          <div class="card-content">
            <!-- 监测数据展示 -->
            <div class="test-data">
              <div class="data-section-title">
                <el-icon>
                  <TrendCharts />
                </el-icon>
                <h4>详细监测数据</h4>
              </div>
              <div class="data-dashboard">
                <div class="data-card" v-for="(value, key) in parseInspectData(currentAudit.inspectData)" :key="key">
                  <div class="data-icon">
                    <el-icon>
                      <DataAnalysis />
                    </el-icon>
                  </div>
                  <div class="data-content">
                    <div class="data-label">{{ key }}</div>
                    <div class="data-value">{{ value }}</div>
                  </div>
                  <div class="data-status">
                    <el-tag :type="getDataStatusType(currentAudit.inspectResult)" size="small" round>
                      {{ getDataStatusText(currentAudit.inspectResult) }}
                    </el-tag>
                  </div>
                </div>
              </div>
            </div>

            <!-- 检测图片展示 -->
            <div class="test-images">
              <div class="data-section-title">
                <el-icon>
                  <Picture />
                </el-icon>
                <h4>检测图片</h4>
              </div>
              <div class="image-gallery">
                <!-- 缺陷照片展示 -->
                <div class="image-card" v-if="currentAudit.defectPhoto">
                  <div class="image-container">
                    <el-image :src="currentAudit.defectPhoto" style="width: 120px; height: 120px; border-radius: 8px;"
                      fit="cover" :preview-src-list="[currentAudit.defectPhoto]" preview-teleported>
                      <template #error>
                        <div class="image-error">
                          <el-icon size="32">
                            <Picture />
                          </el-icon>
                          <span>图片加载失败</span>
                        </div>
                      </template>
                    </el-image>
                  </div>
                  <div class="image-info">
                    <span class="image-name">缺陷照片</span>
                    <el-tag size="small" type="warning">检测图片</el-tag>
                  </div>
                </div>
                <!-- 无图片时的占位符 -->
                <div class="image-card" v-else>
                  <div class="image-placeholder">
                    <el-icon size="32">
                      <Camera />
                    </el-icon>
                    <span>暂无检测图片</span>
                  </div>
                  <div class="image-info">
                    <span class="image-name">检测图片</span>
                    <el-tag size="small" type="info">无图片</el-tag>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 处理建议和结果卡片 - 只有不合格才显示 -->
        <div class="info-card treatment-info" v-if="currentAudit.inspectResult === '不合格'">
          <div class="card-header">
            <div class="card-title">
              <el-icon class="title-icon">
                <Operation />
              </el-icon>
              <h3>处理建议与结果</h3>
            </div>
            <div class="card-badge">
              <el-tag type="danger" size="small">不合格处理</el-tag>
            </div>
          </div>
          <div class="card-content">
            <div class="treatment-section">
              <!-- 处理建议 -->
              <div class="treatment-item">
                <div class="treatment-header">
                  <div class="treatment-icon">
                    <el-icon>
                      <EditPen />
                    </el-icon>
                  </div>
                  <div class="treatment-title">
                    <h4>处理建议</h4>
                    <span class="treatment-subtitle">针对不合格项的建议措施</span>
                  </div>
                </div>
                <div class="treatment-content">
                  <div class="treatment-text">
                    {{ currentAudit.treatment || '暂无处理建议' }}
                  </div>
                  <div class="treatment-meta">
                    <el-tag size="small" type="warning">建议</el-tag>
                    <span class="meta-time">{{ currentAudit.updateTime }}</span>
                  </div>
                </div>
              </div>

              <!-- 处理结果 -->
              <div class="treatment-item" v-if="currentAudit.treatmentResult">
                <div class="treatment-header">
                  <div class="treatment-icon result">
                    <el-icon>
                      <CircleCheck />
                    </el-icon>
                  </div>
                  <div class="treatment-title">
                    <h4>处理结果</h4>
                    <span class="treatment-subtitle">实际执行的处理措施及效果</span>
                  </div>
                </div>
                <div class="treatment-content">
                  <div class="treatment-text">
                    {{ currentAudit.treatmentResult }}
                  </div>
                  <div class="treatment-meta">
                    <el-tag size="small" type="success">已处理</el-tag>
                    <span class="meta-time">{{ currentAudit.updateTime }}</span>
                  </div>
                </div>
              </div>

              <!-- 如果没有处理结果，显示待处理状态 -->
              <div class="treatment-item pending" v-if="!currentAudit.treatmentResult">
                <div class="treatment-header">
                  <div class="treatment-icon pending">
                    <el-icon>
                      <Clock />
                    </el-icon>
                  </div>
                  <div class="treatment-title">
                    <h4>处理状态</h4>
                    <span class="treatment-subtitle">等待处理措施执行</span>
                  </div>
                </div>
                <div class="treatment-content">
                  <div class="treatment-text pending-text">
                    处理建议已提出，等待相关部门执行处理措施
                  </div>
                  <div class="treatment-meta">
                    <el-tag size="small" type="info">待处理</el-tag>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 审核操作 -->
      <template #footer>
        <div class="audit-actions">
          <div class="action-left">
            <el-button size="large" @click="showAuditDialog = false" class="action-btn secondary">
              <el-icon>
                <ArrowLeft />
              </el-icon>
              返回列表
            </el-button>
          </div>
          <div class="action-right">
            <template v-if="currentAudit.inspectStatus !== '已完成'">
              <el-button type="warning" size="large" @click="reviewInspection('退回修改')" class="action-btn">
                <el-icon>
                  <RefreshLeft />
                </el-icon>
                退回修改
              </el-button>
              <el-button type="success" size="large" @click="reviewInspection('批准通过')" class="action-btn primary">
                <el-icon>
                  <CircleCheck />
                </el-icon>
                批准通过
              </el-button>
            </template>
          </div>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import {
  Search, Picture, View, Check, Calendar, AlarmClock, WarningFilled, ArrowUp, ArrowDown,
  Document, Close, InfoFilled, Key, Box, Operation, DataAnalysis, CircleCheck,
  Tickets, Clock, User, TrendCharts, Sunny, Lightning, Camera, Plus,
  Upload, ArrowLeft, RefreshLeft, EditPen
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { queryQualityInspectionService, reviewQualityInspectionService, exportInspectionService } from '@/api/QualityManager'
import type { color } from 'echarts'

const inspectType = ref('')

// 当前激活的标签页
const activeTab = ref('')

// 搜索关键词
const searchKeyword = ref('')

// 表格加载状态
const tableLoading = ref(false)

// 统计卡片动画
const animateCards = ref(false)

// 分页数据
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(20)

// 审核弹窗
const showAuditDialog = ref(false)
const currentAudit = ref<any>({})

// 多选相关
const selectedInspections = ref<any[]>([])
const exportLoading = ref(false)

// 表格行样式
const tableRowClassName = ({ row }: { row: any }) => {
  if (row.isUrgent) {
    return 'urgent-row'
  }
  return ''
}

// 模拟审核列表数据
const auditList = ref([
  {
    inspectionId: 'QC001',
    inspectType: '成品',
    lightFlux: '800lm',
    colorTemp: '3000K',
    defectType: '',
    defectPhoto: 'defect_001.jpg',
    inspectorId: '6',
    username: 'inspector01',
    name: '张三',
    inspectStatus: '已完成',
    inspectResult: '合格',
    inspectData: '{"功率": "10W", "电LED灯珠数量": "16颗", "光通量": "800lm", "色温": "3000K"}',
    inspectCategory: '常规检测',
    inspectCount: '50',
    treatment: '',
    treatmentResult: '',
    standardId: 'STD001',
    createTime: '2024-01-15 09:00:00',
    updateTime: '2024-01-15 10:30:00'
  }
])

// 获取质量结果标签类型
const getResultTagType = (result: string) => {
  switch (result) {
    case '合格':
      return 'success'
    case '不合格':
      return 'danger'
    default:
      return 'info'
  }
}

// 获取状态标签类型
const getStatusTagType = (status: string) => {
  switch (status) {
    case '待处理':
      return 'danger'
    case '已完成':
      return 'success'
    default:
      return 'warning'
  }
}

// 标签页切换
const handleTabChange = () => {
  loadTableData();
  // 根据标签页筛选数据
}

// 行点击处理
const handleRowClick = (row: any) => {
  console.log('点击行:', row)
  handleDetail(row)
}

// 查看详情
const handleDetail = (row: any) => {
  currentAudit.value = row
  showAuditDialog.value = true
}

// 多选处理
const handleSelectionChange = (selection: any[]) => {
  selectedInspections.value = selection
  console.log('选中的质检单:', selection)
}

// 导出Excel
const handleExport = async () => {
  if (selectedInspections.value.length === 0) {
    ElMessage.warning('请先选择要导出的质检单')
    return
  }
  exportLoading.value = true
  
  try {
    const inspectionIds = selectedInspections.value.map(item => item.inspectionId)
    console.log('导出质检单IDs:', inspectionIds)

    // 直接传递inspectionIds数组，匹配后端@RequestParam List<Integer> inspectionIds
    const response = await exportInspectionService({ inspectionIds }) as any
    
    // 创建下载链接 - response.data已经是Blob，直接使用
    const url = window.URL.createObjectURL(response.data)
    const a = document.createElement('a')
    document.body.appendChild(a)
    a.href = url
    a.download = '质检数据统计报表.xlsx'
    a.click()
    window.URL.revokeObjectURL(url)
    document.body.removeChild(a)
    
    ElMessage.success('导出成功')
  } catch (error) {
    console.error('导出过程中发生错误:', error)
    ElMessage.error('导出失败，请稍后重试')
  } finally {
    exportLoading.value = false
  }
}

// 分页处理
const handleSizeChange = (size: number) => {
  pageSize.value = size
  console.log('每页显示:', size)
  loadTableData()
}

const handleCurrentChange = (page: number) => {
  currentPage.value = page
  console.log('当前页:', page)
  loadTableData()
}

// 统一的审核处理方法
const reviewInspection = async (reviewStatus: string) => {
  const reviewInspectionDTO = {
    inspectionId: currentAudit.value.inspectionId,
    reviewStatus: reviewStatus,
    inspectionStatus: currentAudit.value.inspectStatus
  }
  await reviewQualityInspectionService(reviewInspectionDTO)
  const successMessage = reviewStatus === '批准通过' ? '已批准通过' : '已退回修改'
  ElMessage.success(successMessage)
  showAuditDialog.value = false
  // 重新加载表格数据
  loadTableData()
}

// 解析监测数据JSON字符串
const parseInspectData = (inspectData: string) => {
  try {
    if (!inspectData) return {}
    return JSON.parse(inspectData)
  } catch (error) {
    console.error('解析监测数据失败:', error)
    return {}
  }
}

// 获取数据状态类型
const getDataStatusType = (inspectResult: string) => {
  return inspectResult === '合格' ? 'success' : 'danger'
}

// 获取数据状态文本
const getDataStatusText = (inspectResult: string) => {
  return inspectResult === '合格' ? '正常' : '异常'
}

// 组件挂载
onMounted(() => {
  console.log('质量审核页面已加载')

  // 模拟数据加载
  loadTableData()

  // 触发统计卡片动画
  setTimeout(() => {
    animateCards.value = true
  }, 300)
})

// 加载表格数据
const loadTableData = async () => {
  tableLoading.value = true
  let params = {
    pageNumber: currentPage.value,
    pageSize: pageSize.value,
    inspectType: inspectType.value,
    inspectStatus: activeTab.value,
    inspectionId: searchKeyword.value
  }
  const result = await queryQualityInspectionService(params) as any
  auditList.value = result.data.records
  total.value = result.data.total
  tableLoading.value = false
}
</script>

<style lang="scss" scoped>
.quality-audit {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 140px);

  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding: 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);

    h2 {
      margin: 0;
      color: #fff;
      font-size: 28px;
      font-weight: bold;
    }
  }

  .audit-table {
    background: white;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;

    .top-controls {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24px;
      padding-bottom: 16px;
      border-bottom: 1px solid #ebeef5;
      gap: 20px;

      .filter-tabs {
        display: flex;
        align-items: center;
        gap: 20px;
        flex-wrap: wrap;
        flex-shrink: 0;

        :deep(.el-tabs__header) {
          margin-bottom: 0;
        }

        :deep(.el-tabs__nav-wrap) {
          &::after {
            display: none;
          }
        }

        :deep(.el-tabs__active-bar) {
          height: 3px;
          border-radius: 1.5px;
        }

        :deep(.el-tabs__item) {
          font-size: 15px;
          padding: 0 20px;
          height: 40px;
          line-height: 40px;
          transition: all 0.3s;

          &.is-active {
            font-weight: 600;
          }

          &:hover {
            color: #409eff;
          }
        }

        :deep(.el-select) {
          width: 160px;
          flex-shrink: 0;

          .el-input__wrapper {
            box-shadow: 0 0 0 1px #dcdfe6 inset;
            transition: all 0.3s;
            border-radius: 6px;

            &:hover {
              box-shadow: 0 0 0 1px #c0c4cc inset;
            }

            &.is-focus {
              box-shadow: 0 0 0 1px #409eff inset;
            }
          }
        }

        // 移动端适配
        @media (max-width: 768px) {
          flex-direction: column;
          align-items: stretch;
          gap: 16px;
        }
      }

      .action-section {
        display: flex;
        align-items: center;
        gap: 20px;
        flex-shrink: 0;

        .search-section {
          flex-shrink: 0;

          :deep(.el-input__wrapper) {
            box-shadow: 0 0 0 1px #dcdfe6 inset;
            transition: all 0.3s;

            &:hover {
              box-shadow: 0 0 0 1px #c0c4cc inset;
            }

            &.is-focus {
              box-shadow: 0 0 0 1px #409eff inset;
            }
          }
        }
      }
    }

    :deep(.el-table__header-wrapper) {
      .el-table__header {
        th {
          background-color: #f5f7fa;
          font-weight: 600;
          color: #303133;
          height: 50px;
        }
      }

      .el-table__row {
        cursor: pointer;
        transition: all 0.2s;

        &:hover {
          background-color: #f0f7ff !important;
        }

        &.urgent-row {
          background-color: #fff9f9;
        }
      }
    }

    .audit-number {
      display: flex;
      align-items: center;
      gap: 5px;

      &.urgent {
        color: #f56c6c;
        font-weight: 600;
      }
    }

    .operation-buttons {
      display: flex;
      gap: 10px;
    }

    .pagination {
      margin-top: 24px;
      display: flex;
      justify-content: flex-end;
    }
  }

  .stats-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;

    .stats-card {
      background: white;
      padding: 24px;
      border-radius: 12px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
      display: flex;
      align-items: center;
      gap: 20px;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;

      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
      }

      &::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 100px;
        height: 100px;
        background: linear-gradient(135deg, rgba(64, 158, 255, 0.1), transparent);
        border-radius: 0 0 0 100%;
      }

      &.pulse-animation {
        animation: pulse 1.5s ease-in-out;
      }

      .stats-icon {
        width: 60px;
        height: 60px;
        border-radius: 12px;
        background-color: rgba(64, 158, 255, 0.1);
        color: #409eff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        flex-shrink: 0;

        &.warning {
          background-color: rgba(230, 162, 60, 0.1);
          color: #e6a23c;
        }

        &.danger {
          background-color: rgba(245, 108, 108, 0.1);
          color: #f56c6c;
        }
      }

      .stats-content {
        flex-grow: 1;

        .stats-number {
          font-size: 32px;
          font-weight: 700;
          color: #303133;
          margin-bottom: 8px;
          line-height: 1.2;
        }

        .stats-label {
          font-size: 15px;
          color: #606266;
          margin-bottom: 10px;
        }

        .stats-trend {
          font-size: 13px;
          font-weight: 500;
          display: flex;
          align-items: center;
          gap: 4px;

          &.up {
            color: #67c23a;
          }

          &.down {
            color: #f56c6c;
          }
        }
      }
    }
  }
}

// 审核弹窗样式优化
:deep(.audit-dialog) {
  .el-dialog {
    border-radius: 16px;
    overflow: hidden;
  }

  .el-dialog__header {
    padding: 0;
    margin: 0;
  }

  .el-dialog__body {
    padding: 0;
  }

  .el-dialog__footer {
    padding: 0;
    margin: 0;
  }
}

.dialog-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 24px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .header-left {
    display: flex;
    align-items: center;
    gap: 16px;

    .header-icon {
      width: 48px;
      height: 48px;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
    }

    .header-info {
      h2 {
        margin: 0;
        font-size: 24px;
        font-weight: 600;
      }

      p {
        margin: 4px 0 0 0;
        opacity: 0.9;
        font-size: 14px;
      }
    }
  }

  .header-right {
    display: flex;
    align-items: center;
    gap: 16px;

    .status-badge {
      font-size: 14px;
      font-weight: 600;
      padding: 8px 16px;
    }

    .close-btn {
      background: rgba(255, 255, 255, 0.2);
      border: none;
      color: white;

      &:hover {
        background: rgba(255, 255, 255, 0.3);
      }
    }
  }
}

.audit-dialog-content {
  padding: 32px;
  background: #f8fafc;
  min-height: 600px;

  .info-card {
    background: white;
    border-radius: 16px;
    margin-bottom: 24px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    }

    .card-header {
      background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
      padding: 20px 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #e2e8f0;

      .card-title {
        display: flex;
        align-items: center;
        gap: 12px;

        .title-icon {
          color: #667eea;
          font-size: 20px;
        }

        h3 {
          margin: 0;
          color: #1e293b;
          font-size: 18px;
          font-weight: 600;
        }
      }

      .card-badge {
        .el-tag {
          font-weight: 500;
        }
      }
    }

    .card-content {
      padding: 24px;
    }
  }

  .info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;

    .info-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 16px;
      background: #f8fafc;
      border-radius: 12px;
      border: 1px solid #e2e8f0;
      transition: all 0.3s ease;

      &:hover {
        background: #f1f5f9;
        border-color: #cbd5e1;
        transform: translateY(-1px);
      }

      &.full-width {
        grid-column: 1 / -1;
      }

      .item-icon {
        width: 40px;
        height: 40px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        flex-shrink: 0;
      }

      .item-content {
        flex: 1;

        label {
          display: block;
          color: #64748b;
          font-size: 13px;
          font-weight: 500;
          margin-bottom: 4px;
          text-transform: uppercase;
          letter-spacing: 0.5px;
        }

        .value {
          color: #1e293b;
          font-size: 16px;
          font-weight: 600;

          &.highlight {
            color: #667eea;
            font-size: 18px;
          }

          &.description {
            font-size: 14px;
            font-weight: 400;
            line-height: 1.5;
            color: #475569;
          }

          &.defect-type {
            color: #f56c6c;
            font-weight: 700;
            background: #fef0f0;
            padding: 4px 8px;
            border-radius: 4px;
            border: 1px solid #fbc4c4;
          }
        }

        .result-tag {
          font-weight: 600;
          padding: 6px 12px;
        }
      }
    }
  }

  .report-header {
    margin-bottom: 24px;

    .report-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 16px;

      .report-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px;
        background: #f8fafc;
        border-radius: 12px;
        border-left: 4px solid #667eea;

        .item-icon {
          width: 36px;
          height: 36px;
          background: #667eea;
          color: white;
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 16px;
        }

        .item-content {
          label {
            display: block;
            color: #64748b;
            font-size: 12px;
            font-weight: 500;
            margin-bottom: 2px;
          }

          .value {
            color: #1e293b;
            font-size: 14px;
            font-weight: 600;
          }
        }
      }
    }
  }

  .test-data {
    margin-bottom: 32px;

    .data-section-title {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 20px;
      color: #1e293b;

      h4 {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
      }
    }

    .data-dashboard {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 12px;

      .data-card {
        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
        border-radius: 12px;
        padding: 16px;
        border: 1px solid #e2e8f0;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
        min-height: 80px;

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 8px 25px rgba(59, 130, 246, 0.15);
          border-color: #3b82f6;
        }

        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 3px;
          background: linear-gradient(90deg, #3b82f6, #06b6d4);
          transform: scaleX(0);
          transition: transform 0.3s ease;
        }

        &:hover::before {
          transform: scaleX(1);
        }

        .data-icon {
          width: 48px;
          height: 48px;
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          color: white;
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 20px;
          margin-bottom: 16px;
        }

        .data-content {
          .data-label {
            color: #64748b;
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 8px;
          }

          .data-value {
            font-size: 32px;
            font-weight: 700;
            margin-bottom: 4px;

            &.primary {
              color: #667eea;
            }

            &.secondary {
              color: #06b6d4;
            }

            &.accent {
              color: #10b981;
            }
          }

          .data-unit {
            color: #94a3b8;
            font-size: 12px;
            font-weight: 500;
          }
        }

        .data-status {
          margin-top: 12px;
        }
      }
    }
  }

  .test-images {
    .data-section-title {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 20px;
      color: #1e293b;

      h4 {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
      }
    }

    .image-gallery {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      gap: 16px;

      .image-card {
        background: white;
        border-radius: 12px;
        border: 2px solid #e2e8f0;
        overflow: hidden;
        transition: all 0.3s ease;

        &:hover {
          border-color: #667eea;
          transform: translateY(-2px);
          box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
        }

        &.add-image {
          border-style: dashed;
          cursor: pointer;

          &:hover {
            background: #f8fafc;
            border-color: #667eea;
          }
        }

        .image-container {
          height: 120px;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 8px;

          .el-image {
            border-radius: 8px;
            overflow: hidden;
          }
        }

        .image-placeholder {
          height: 120px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          color: #94a3b8;
        }

        .image-error {
          height: 120px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          color: #ef4444;
          background: #fef2f2;

          span {
            margin-top: 8px;
            font-size: 12px;
            font-weight: 500;
          }
        }

        .image-info {
          padding: 12px;
          background: white;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .image-name {
            font-size: 13px;
            font-weight: 500;
            color: #1e293b;
          }
        }
      }
    }
  }

  .timeline {
    .timeline-item {
      display: flex;
      gap: 16px;
      margin-bottom: 24px;

      &:last-child {
        margin-bottom: 0;
      }

      .timeline-dot {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        flex-shrink: 0;
        position: relative;

        &.active {
          background: linear-gradient(135deg, #10b981 0%, #059669 100%);
          color: white;
          box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
        }

        &.pending {
          background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
          color: white;
          box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
        }

        &::after {
          content: '';
          position: absolute;
          top: 50px;
          left: 50%;
          transform: translateX(-50%);
          width: 2px;
          height: 40px;
          background: #e2e8f0;
        }
      }

      &:last-child .timeline-dot::after {
        display: none;
      }

      .timeline-content {
        flex: 1;
        background: white;
        border-radius: 12px;
        padding: 20px;
        border: 1px solid #e2e8f0;

        .timeline-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 8px;

          .timeline-title {
            font-size: 16px;
            font-weight: 600;
            color: #1e293b;
          }

          .timeline-time {
            font-size: 12px;
            color: #64748b;
            font-weight: 500;
          }
        }

        .timeline-desc {
          color: #475569;
          font-size: 14px;
          line-height: 1.5;
          margin-bottom: 12px;
        }

        .timeline-meta {
          display: flex;
          align-items: center;
          gap: 8px;

          .meta-text {
            font-size: 12px;
            color: #64748b;
          }
        }
      }
    }
  }
}

.audit-actions {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  padding: 24px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #e2e8f0;

  .action-left {
    .action-btn {
      &.secondary {
        background: white;
        border: 2px solid #e2e8f0;
        color: #64748b;
        font-weight: 500;
        padding: 12px 24px;
        border-radius: 12px;
        transition: all 0.3s ease;

        &:hover {
          background: #f8fafc;
          border-color: #cbd5e1;
          color: #475569;
          transform: translateY(-1px);
        }

        .el-icon {
          margin-right: 8px;
        }
      }
    }
  }

  .action-right {
    display: flex;
    gap: 16px;

    .action-btn {
      padding: 12px 24px;
      border-radius: 12px;
      font-weight: 600;
      transition: all 0.3s ease;
      border: none;

      .el-icon {
        margin-right: 8px;
      }

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
      }

      &.primary {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);

        &:hover {
          background: linear-gradient(135deg, #059669 0%, #047857 100%);
        }
      }
    }
  }

  @media (max-width: 768px) {
    flex-direction: column;
    gap: 16px;

    .action-left,
    .action-right {
      width: 100%;
      justify-content: center;
    }

    .action-right {
      flex-direction: column;
      gap: 12px;

      .action-btn {
        width: 100%;
        justify-content: center;
      }
    }
  }
}

// 处理建议和结果样式
.treatment-info {
  .treatment-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .treatment-item {
    border: 1px solid #e4e7ed;
    border-radius: 8px;
    padding: 16px;
    background: #fafafa;
    transition: all 0.3s ease;

    &:hover {
      border-color: #409eff;
      box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1);
    }

    &.pending {
      background: #f0f9ff;
      border-color: #91d5ff;
    }
  }

  .treatment-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
  }

  .treatment-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #409eff;
    color: white;
    flex-shrink: 0;

    &.result {
      background: #67c23a;
    }

    &.pending {
      background: #909399;
    }
  }

  .treatment-title {
    flex: 1;

    h4 {
      margin: 0 0 4px 0;
      font-size: 16px;
      font-weight: 600;
      color: #303133;
    }

    .treatment-subtitle {
      font-size: 13px;
      color: #909399;
    }
  }

  .treatment-content {
    margin-left: 44px;
  }

  .treatment-text {
    background: white;
    border: 1px solid #e4e7ed;
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 1.6;
    color: #606266;
    min-height: 60px;

    &.pending-text {
      background: #f0f9ff;
      border-color: #91d5ff;
      color: #1890ff;
      font-style: italic;
    }
  }

  .treatment-meta {
    display: flex;
    align-items: center;
    gap: 8px;

    .meta-time {
      font-size: 12px;
      color: #c0c4cc;
    }
  }
}

// 移动端适配
@media (max-width: 768px) {
  .quality-audit {
    padding: 12px;

    .audit-table {
      padding: 16px;

      .top-controls {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;

        .filter-tabs {
          flex-direction: column;
          align-items: stretch;
          gap: 16px;
        }

        .action-section {
          flex-direction: column;
          gap: 12px;

          .search-section {
            :deep(.el-input) {
              width: 100% !important;
            }
          }
        }
      }
    }

    .stats-section {
      grid-template-columns: 1fr;
      gap: 16px;

      .stats-card {
        padding: 16px;

        .stats-icon {
          width: 48px;
          height: 48px;
          font-size: 20px;
        }

        .stats-content {
          .stats-number {
            font-size: 24px;
          }
        }
      }
    }
  }

  :deep(.audit-dialog) {
    .el-dialog {
      width: 95% !important;
      margin: 20px auto;
    }
  }

  .dialog-header {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 12px;

    .header-right {
      align-self: flex-end;
    }
  }

  .audit-dialog-content {
    padding: 16px;

    .info-grid {
      grid-template-columns: 1fr !important;
      gap: 12px;
    }

    .data-dashboard {
      grid-template-columns: 1fr !important;
      gap: 8px;

      .data-card {
        padding: 12px;
        min-height: 60px;

        .data-icon {
          width: 32px;
          height: 32px;
          font-size: 16px;
        }

        .data-content {
          .data-label {
            font-size: 12px;
          }

          .data-value {
            font-size: 20px;
          }
        }
      }
    }

    .image-gallery {
      grid-template-columns: 1fr !important;
    }
  }

  .audit-actions {
    padding: 16px;
    flex-direction: column;
    gap: 12px;

    .action-left,
    .action-right {
      width: 100%;
      justify-content: center;
    }

    .action-right {
      flex-direction: column;
      gap: 12px;

      .action-btn {
        width: 100%;
      }
    }
  }

  /* 移动端处理建议样式调整 */
  .treatment-info {
    .treatment-header {
      gap: 8px;
    }

    .treatment-icon {
      width: 28px;
      height: 28px;
    }

    .treatment-title h4 {
      font-size: 14px;
    }

    .treatment-content {
      margin-left: 36px;
    }

    .treatment-text {
      padding: 10px;
      font-size: 13px;
    }
  }
}

.audit-number-cell {
  display: flex;
  align-items: center;
  gap: 8px;

  .audit-number {
    font-weight: 600;
    color: #1890ff;

    &.urgent {
      color: #f5222d;
    }
  }

  .urgent-tag {
    font-size: 10px;
    padding: 2px 6px;
  }
}

.inspection-type {
  color: #666;
  font-weight: 500;
}

.result-tag {
  font-weight: 600;
  border-radius: 6px;
  padding: 4px 12px;
}

.submitter-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;

  .submitter-avatar {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-size: 12px;
    font-weight: 600;
  }

  .submitter-name {
    color: #333;
    font-weight: 500;
  }
}

.time-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  color: #666;

  .time-icon {
    color: #999;
    font-size: 14px;
  }
}

.status-tag {
  font-weight: 600;
  border-radius: 6px;
  padding: 4px 12px;
  min-width: 60px;
}

.action-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;

  .action-btn {
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.2s ease;

    &:hover {
      transform: translateY(-1px);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }
  }
}

.pagination {
  margin-top: 24px;
  display: flex;
  justify-content: center;
  padding: 16px 0;
  border-top: 1px solid #f0f0f0;
}
</style>